<template>
  <!-- 居中 -->
  <van-row type="flex" justify="center">
    <van-col span="18">
      <div class="my-device">
        <!--  所有设备列表  -->
        <div class="all-device-list">
          <van-row type="flex" justify="center" class="van-hairline--top device" v-for="dev in dataList" :key="dev.id">
            <van-col span="8" offset="2" @click="entryDevice(dev.id)">{{dev.deviceInfo}}</van-col>
            <van-col span="2" offset="6">
              <van-icon name="edit" color="" size="20" @click="modifyDialog(dev.id,dev.deviceInfo)"/>
            </van-col>
            <van-col span="2" offset="1">
              <van-icon name="share" color="" size="20" @click="share(dev.id,dev.deviceInfo)"/>
            </van-col>
          </van-row>
        </div>
        <van-dialog v-model="showDialog"
                    :beforeClose="beforeClose"
                    :title="'修改设备【' + macCode + '】的名称'"
                    show-cancel-button>
          <van-field
            v-model="deviceName"
            placeholder="请输入要修改的设备名称"
          />
        </van-dialog>
      </div>
    </van-col>
  </van-row>

</template>

<script>
  export default {
    name: "device-list",
    props: {
      dataList: {
        default: []
      }
    },
    data() {
      return {
        showDialog: false,
        macCode: '',
        deviceName: ''
      }
    },
    methods: {
      //进入设备
      entryDevice(deviceId) {
        location.href = 'main_v3.html?deviceId=' + deviceId
      },
      //修改设备名称
      modifyDialog(deviceId, deviceInfo) {
        let that = this;
        that.showDialog = true;
        that.macCode = deviceId;
        that.deviceName = deviceInfo;
      },
      //关闭弹窗
      beforeClose(action, done) {
        let that = this;
        that.showDialog = false;
        if (action === 'cancel') {
          done();
        } else if (action === 'confirm') {//确定按钮
          done();
          let cook = that.$cookies.get(process.env.VUE_APP_COOKIE_USER_KEY);
          let id = cook.userInfo.id;
          let param = {
            userId: id,
            userType: 2,
            deviceCode: that.macCode,
            deviceName: that.deviceName,
          };
          that.$http.restPost('/updateDeviceName.do', param).then((res) => {
            if (res.data && res.data.result === 1) {
              alert('修改成功');
              location.reload();
            } else {
              alert('修改失败')
            }
          });

        }
      },
      share(deviceId, deviceInfo) {
        console.log(deviceId, deviceInfo)
        alert('分享功能需要在线上环境使用')
      }
    }
  }
</script>

<style lang="css" scoped>

  /* 所有设备div */
  .my-device {
    width: 100%;
    margin-top: 35%;
  }

  /* 当前设备样式 */
  .device {
    width: 100%;
    height: 51px;
    background-color: #ffffff;
    text-align: center;
    font-size: 17px;
    color: #3198FC;
    line-height: 51px;
    border-radius: 15px;
  }

  /* 除当前外所有设备样式 */
  .all-device-list {
    margin-top: 3px;
    background-color: #ffffff;
    border-radius: 15px;
  }

</style>
